@import "css/variables";

section.hero {
  .hero-background {
    position: absolute;
    top: -1rem;
    width: 100%;
    max-width: 100%;
    height: 900px;
    z-index: -1;
    background-image: url("/images/hero-background.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    @media (max-width: $xl) {
      top: -6rem;
    }

    @media (max-width: $lg) {
      top: -13.5rem;
    }

    @media (max-width: $sm) {
      top: -5rem;
    }

    @media (max-width: $md) and (orientation: landscape) {
      top: -17rem;
    }

    @media (max-width: $sm) and (orientation: landscape) {
      top: -19.5rem;
    }
  }

  .hero-main {
    margin-top: 9.6rem;
    margin-bottom: 8rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .hero-left {
      width: 570px;
      max-width: 570px;

      .hero-slogan {
        font-size: 2.8rem;
        font-weight: 300;
        line-height: 1.2;

        .hero-product-name {
          font-weight: 500;
          color: #000;

          .hero-product-name-trademark {
            font-weight: 300;
          }

          @media (max-width: $sm) and (orientation: portrait) {
            display: block;
            margin-bottom: 0.5em;
          }
        }

        @media (min-width: $sm) {
          .hero-slogan-second-line {
            letter-spacing: 0.001em;
            word-spacing: 0.04em;
          }
        }

        @media (max-width: $xl) {
          font-size: 38px;
        }
      }

      .hero-buttons {
        margin-top: $spacer * 2.2;

        .button {
          font-family: "Roboto Condensed", sans-serif;
          font-size: 1.025rem;

          @media (max-width: $sm) and (orientation: portrait) {
            font-size: 1.2rem;
          }
        }

        & > *:not(:first-child) {
          margin-left: $spacer * 0.8;

          @media (max-width: $sm) {
            margin-top: $spacer * 0.8;
          }

          @media (max-width: $sm) and (orientation: portrait) {
            margin-left: 0;
            display: block;
          }
        }

        @media (max-width: $sm) and (orientation: portrait) {
          margin-top: $spacer * 3;
        }

        &.hero-buttons-second {
          margin-top: $spacer;
        }
      }

      @media (max-width: $xl) {
        max-width: 450px;
      }

      @media (max-width: $lg) {
        width: 80%;
        max-width: 80%;
        text-align: center;
      }
    }

    .hero-right {
      width: 535px;

      @media (max-width: $xl) {
        width: 450px;
      }

      @media (max-width: $lg) {
        display: none;
      }
    }

    @media (max-width: $xl) {
      margin-top: 8rem;
    }

    @media (max-width: $lg) {
      justify-content: center;
    }

    @media (max-width: $sm) {
      margin-top: 7rem;
    }

    @media (max-width: $md) and (orientation: landscape) {
      margin-top: 6rem;
      margin-bottom: 6rem;
    }

    @media (max-width: $sm) and (orientation: landscape) {
      margin-top: 5rem;
      margin-bottom: 5rem;
    }
  }
}
